---
title: "Pie Chart"
description: Pie charts are used to represent proportions or percentages of a whole, making them ideal for showing part-to-whole relationships.
order: 5
published: true
references: ["https://recharts.org/en-US/api/PieChart"]
---

## Basic
Present data in a simple and visually appealing way using a basic pie chart.
<How className="w-full max-w-xl" toUse="visualizations/pie-chart/pie-chart-demo"/>

## Installation
```bash
npx shadcn@latest add @intentui/pie-chart
```

## Manual installation
```bash
npm i recharts
```

<SourceCode toShow={'pie-chart'} />

## Donut
Visualize data with a donut chart for a modern and clean look.
<How className="w-full max-w-xl" toUse="visualizations/pie-chart/pie-chart-donut-demo"/>

## Label inside
Enhance your donut chart by adding descriptive text for better understanding.
<How className="w-full max-w-xl" toUse="visualizations/pie-chart/pie-chart-donut-label-demo"/>


## Controlled
Sometimes you might want to control the chart data dynamically.
<How className="w-full max-w-xl" toUse="visualizations/pie-chart/pie-chart-interactive-demo"/>

## Gap
Add spacing between pie slices for better visibility and aesthetics.
<How className="w-full max-w-xl" toUse="visualizations/pie-chart/pie-chart-gap-demo"/>
